<template>
  <el-dialog title="新增部门" :visible="showDialog" @close="close">
    <!-- 放置表单内容 -->
     <el>
      <form action="">
        <el-item>
          <el-input></el-input>
        </el-item>
      </form>
     </el>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: { type: Boolean,
    // eslint-disable-next-line vue/require-default-prop, vue/require-prop-type-constructor
      default: false }
  },
  methods: {
    close() {
      // 修改父组件的showDialog
      // update:propName 这样的事件命名格式是 Vue.js 框架专门设计的，目的是让父子组件之间的数据流动更加清晰、规范，同时保持与单向数据流原则的一致性。
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
